<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <title>Notes</title>
  <link href="http://example.com/foo" rel="canonical">
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"></p>
   <h1>Notes</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Living Standard, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <div data-fill-with="spec-metadata">
    <dl>
     <dt>This version:
     <dd><a class="u-url" href="http://example.com/foo">http://example.com/foo</a>
     <dt class="editor">Editor:
     <dd class="editor p-author h-card vcard"><span class="p-name fn">Example Editor</span>
    </dl>
   </div>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright">COPYRIGHT GOES HERE </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>Index entries should be the original casing, even though dfns are matched case-insensitively.

Notes and issues should be generated correctly.</p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li><a href="#issues-index"><span class="secno"></span> <span class="content">Issues Index</span></a>
   </ol>
  </nav>
  <main>
   <p class="note" role="note"><span>Note:</span> This is a note.</p>
   <p class="note" role="note"><span>Note,</span> this too is a note.</p>
   <p class="note" role="note"><span>NOTE:</span> Also this.</p>
   <p class="note" role="note"><span>NOTE,</span> notes! Though I don’t like this syntax, it’s easy.</p>
   <p class="issue" id="issue-05237a4c"><a class="self-link" href="#issue-05237a4c"></a> This is an issue.</p>
   <p class="issue" id="issue-7004b3b3"><a class="self-link" href="#issue-7004b3b3"></a> THIS IS AN ISSUE OMG!!!!11!!!1!</p>
   <p class="issue" id="issue-59bc309a"><a class="self-link" href="#issue-59bc309a"></a> This is an issue, linked via the magic of an auto-detected GitHub repo and a numeric issue id. <a href="https://github.com/tabatkins/bikeshed/issues/123">&lt;https://github.com/tabatkins/bikeshed/issues/123></a></p>
   <p class="issue" id="issue-cfb7f5c7"><a class="self-link" href="#issue-cfb7f5c7"></a> This is an issue, linked to GitHub via the magic of regular expressions. <a href="https://github.com/tabatkins/bikeshed/issues/1">&lt;https://github.com/tabatkins/bikeshed/issues/1></a></p>
   <p class="issue" id="issue-302c2cef"><a class="self-link" href="#issue-302c2cef"></a> This is an issue, linked to GitHub via the magic of regular expressions as well! <a href="https://github.com/tabatkins/bikeshed/issues/2">&lt;https://github.com/tabatkins/bikeshed/issues/2></a></p>
   <p class="issue" id="issue-0ff06144"><a class="self-link" href="#issue-0ff06144"></a> This one too! <a href="https://github.com/ta-bat_kins/bikesh123ed/issues/1">&lt;https://github.com/ta-bat_kins/bikesh123ed/issues/1></a></p>
   <p class="issue" id="issue-2f353466"><a class="self-link" href="#issue-2f353466"></a> This is not a GitHub issue. It autolinks via the Issue Tracker Template. <a href="https://issue-tracker.test/issue-Hahaha, this/looks like a github url#123456789 but it’s not surprise sucka!">&lt;https://issue-tracker.test/issue-Hahaha, this/looks like a github url#123456789 but it’s not surprise sucka!></a></p>
  </main>
  <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content">Issues Index</span></h2>
  <div style="counter-reset:issue">
   <div class="issue"> This is an issue.<a href="#issue-05237a4c"> ↵ </a></div>
   <div class="issue"> THIS IS AN ISSUE OMG!!!!11!!!1!<a href="#issue-7004b3b3"> ↵ </a></div>
   <div class="issue"> This is an issue, linked via the magic of an auto-detected GitHub repo and a numeric issue id. <a href="https://github.com/tabatkins/bikeshed/issues/123">&lt;https://github.com/tabatkins/bikeshed/issues/123></a><a href="#issue-59bc309a"> ↵ </a></div>
   <div class="issue"> This is an issue, linked to GitHub via the magic of regular expressions. <a href="https://github.com/tabatkins/bikeshed/issues/1">&lt;https://github.com/tabatkins/bikeshed/issues/1></a><a href="#issue-cfb7f5c7"> ↵ </a></div>
   <div class="issue"> This is an issue, linked to GitHub via the magic of regular expressions as well! <a href="https://github.com/tabatkins/bikeshed/issues/2">&lt;https://github.com/tabatkins/bikeshed/issues/2></a><a href="#issue-302c2cef"> ↵ </a></div>
   <div class="issue"> This one too! <a href="https://github.com/ta-bat_kins/bikesh123ed/issues/1">&lt;https://github.com/ta-bat_kins/bikesh123ed/issues/1></a><a href="#issue-0ff06144"> ↵ </a></div>
   <div class="issue"> This is not a GitHub issue. It autolinks via the Issue Tracker Template. <a href="https://issue-tracker.test/issue-Hahaha, this/looks like a github url#123456789 but it’s not surprise sucka!">&lt;https://issue-tracker.test/issue-Hahaha, this/looks like a github url#123456789 but it’s not surprise sucka!></a><a href="#issue-2f353466"> ↵ </a></div>
  </div>